<template>
  <div class="min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between shadow-sm">
      <div class="flex items-center">
        <button  class="lg:hidden text-gray-500 hover:text-gray-900 p-2 rounded-md" @click="toggleSidebar">
          <i class="fa fa-bars"></i>
        </button>
        <div class="ml-4 text-xl font-bold text-gray-800">Admin Dashboard</div>
      </div>
      
      <div class="flex items-center space-x-4">
        <button class="relative p-2 text-gray-500 hover:text-gray-900 rounded-full hover:bg-gray-100 transition-colors">
          <i class="fa fa-bell"></i>
          <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
        </button>
        <div class="flex items-center space-x-2">
          <img src="https://picsum.photos/id/1005/40/40" alt="User avatar" class="w-8 h-8 rounded-full object-cover">
          <span class="hidden md:inline text-sm font-medium">John Doe</span>
        </div>
      </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
      <!-- 侧边栏 -->
      <aside 
        :class="{ '-translate-x-full lg:translate-x-0': !sidebarOpen }"
        class="fixed lg:relative w-64 bg-white border-r border-gray-200 h-full z-30 transition-transform duration-300 ease-in-out shadow-lg"
      >
        <div class="py-4 px-3">
          <nav class="space-y-1">
            <NuxtLink 
              to="/admin/dashboard" 
              class="flex items-center px-3 py-2 text-sm font-medium rounded-md group transition-all duration-200"
              :class="{ 'bg-gray-100 text-gray-900': isActive('/admin/dashboard') }"
            >
              <i class="fa fa-tachometer mr-3 text-gray-500 group-hover:text-gray-900"></i>
              <span>Dashboard</span>
            </NuxtLink>
            
            <NuxtLink 
              to="/admin/users" 
              class="flex items-center px-3 py-2 text-sm font-medium rounded-md group transition-all duration-200"
              :class="{ 'bg-gray-100 text-gray-900': isActive('/admin/users') }"
            >
              <i class="fa fa-users mr-3 text-gray-500 group-hover:text-gray-900"></i>
              <span>Users</span>
            </NuxtLink>
            
            <NuxtLink 
              to="/admin/setting" 
              class="flex items-center px-3 py-2 text-sm font-medium rounded-md group transition-all duration-200"
              :class="{ 'bg-gray-100 text-gray-900': isActive('/admin/setting') }"
            >
              <i class="fa fa-shopping-bag mr-3 text-gray-500 group-hover:text-gray-900"></i>
              <span>Products</span>
            </NuxtLink>
            
            <NuxtLink 
              to="/admin/settings" 
              class="flex items-center px-3 py-2 text-sm font-medium rounded-md group transition-all duration-200"
              :class="{ 'bg-gray-100 text-gray-900': isActive('/admin/settings') }"
            >
              <i class="fa fa-cog mr-3 text-gray-500 group-hover:text-gray-900"></i>
              <span>Settings</span>
            </NuxtLink>
          </nav>
        </div>
      </aside>

      <!-- 主内容区 -->
      <!-- <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
        <div class="max-w-7xl mx-auto">
            <NuxtRouteAnnouncer />
            <NuxtPage />
        </div>
      </main> -->
      <main class="flex-1 overflow-y-auto bg-gray-50 p-6">
        <div class="max-w-7xl mx-auto">
            <NuxtRouteAnnouncer />
            <NuxtPage />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'nuxt/app'

const route = useRoute()
const sidebarOpen = ref(true)

// 移动端切换侧边栏
const toggleSidebar = () => {
  sidebarOpen.value = !sidebarOpen.value
}

// 判断当前路由是否激活
const isActive = (path) => {
  return route.path.startsWith(path)
}
</script>

<style scoped>
/* 添加一些基础动画效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>    